<template>
  <div class="ResCompBox transition-box">
    <div
      class="Box"
      :class="{
        dark: theme.state.themeState == 'drak',
        lightDark: theme.state.themeState == 'light',
      }"
    >
      <div class="title">
        <span>注册</span>
        <span class="iconfont icon-close rigth" @click="closeDom"></span>
      </div>
      <div class="InputCompBox">
        <span class="label">账号：</span>
        <input
          v-model="userNameRef"
          type="text"
          placeholder="请输入邮箱/手机号码"
          :class="{
            default: userNameErrorMessage ? false : true,
            error: userNameErrorMessage ? true : false,
            dark_input: theme.state.themeState == 'drak',
            light_input: theme.state.themeState == 'light',
          }"
          @blur="userNameBlurFn"
        />
        <transition name="el-zoom-in-center">
          <p>{{ userNameErrorMessage == 0 ? "" : userNameErrorMessage }}</p>
        </transition>
      </div>
      <div class="InputCompBox">
        <span class="label">登录密码：</span>
        <input
          v-model="passWordRef"
          type="text"
          placeholder="请输入密码"
          :class="{
            default: passWordErrorMessage ? false : true,
            error: passWordErrorMessage ? true : false,
            dark_input: theme.state.themeState == 'drak',
            light_input: theme.state.themeState == 'light',
          }"
          @blur="passWordBlurFn"
        />
        <transition name="el-zoom-in-center">
          <p>{{ passWordErrorMessage == 0 ? "" : passWordErrorMessage }}</p>
        </transition>
      </div>
      <div class="InputCompBox">
        <span style="float: left; line-height: 35px">验证码：</span>
        <button
          :class="{ btnClick: buttonStateRef == 1 }"
          @click="getPhoneCode"
        >
          {{ !buttonStateRef ? "获取验证码" : showInfoRef + "s重新发送" }}
        </button>
        <input
          type="text"
          placeholder="请输入验证码"
          class="checkCode"
          :class="{
            default: codeErrorMessage ? false : true,
            error: codeErrorMessage ? true : false,
            dark_input: theme.state.themeState == 'drak',
            light_input: theme.state.themeState == 'light',
          }"
          v-model="codeRef"
          @blur="codeBlurFn"
        />

        <transition name="el-zoom-in-center">
          <p>{{ codeErrorMessage == 0 ? "" : codeErrorMessage }}</p>
        </transition>
      </div>
      <button class="codeLogin" @click="resFn">注册</button>
      <button class="codeReset" @click="resetFn">重置</button>
    </div>
  </div>
</template>
 
<script lang="ts">
import ins from "../../utils/Axios";
import { Options, Vue } from "vue-class-component";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
@Options({})
export default class ResComp extends Vue {
  theme: any = useStore();

  userNameRef: String = "";
  passWordRef: String = "";
  codeRef: String = "";

  /**
   * 验证
   */
  userNameErrorMessage: any = "";
  passWordErrorMessage: any = "";
  codeErrorMessage: any = "";
  isEmail: Boolean = false;
  userNameBlurFn() {
    let PhoneRule =
      /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
    let EmailRule =
      /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
    if (!this.userNameRef) {
      this.userNameErrorMessage = "不允许为空！";
      throw new Error("不允许为空！");
    }
    if (EmailRule.test("" + this.userNameRef)) {
      this.isEmail = true;
    }
    if (!this.isEmail) {
      if (!PhoneRule.test("" + this.userNameRef)) {
        this.userNameErrorMessage = "邮箱/手机号码格式错误！";
        throw new Error("Error！");
      }
    }
    this.userNameErrorMessage = 0;
  }
  passWordBlurFn() {
    if (!this.passWordRef) {
      this.passWordErrorMessage = "不允许为空！";
      throw new Error("不允许为空！");
    }
    if (this.passWordRef.length < 6) {
      this.passWordErrorMessage = "密码长度不符合要求！";
      throw new Error("不允许为空！");
    }
    this.passWordErrorMessage = 0;
  }
  codeBlurFn() {
    if (!this.codeRef) {
      this.codeErrorMessage = "不允许为空！";
      throw new Error("不允许为空！");
    }
    this.codeErrorMessage = 0;
  }
  // 按钮状态
  buttonStateRef = 0;
  // 按钮数字
  showInfoRef = 0;
  getPhoneCode() {
    if (typeof this.userNameErrorMessage == "number") {
      // 发送请求
      ins
        .post(this.isEmail ? "/other/getEmailCode" : "/other/getPhoneCode", {
          userName: this.userNameRef,
        })
        .catch((err: any) => {
          ElMessage.error("网络超时，请刷新后重试！");
        });

      if (this.buttonStateRef == 1) {
        return;
      }
      this.buttonStateRef = 1;
      this.showInfoRef = 10;
      let timer = setInterval(() => {
        this.showInfoRef--;
        if (this.showInfoRef <= 1) {
          this.buttonStateRef = 0;
          clearInterval(timer);
        }
      }, 1000);
    } else {
      ElMessage.error("错误，请检查填写项.");
      return;
    }
  }

  resFn() {
    if (
      !this.codeErrorMessage &&
      !this.userNameErrorMessage &&
      !this.passWordErrorMessage &&
      typeof this.codeErrorMessage == "number" &&
      typeof this.userNameErrorMessage == "number" &&
      typeof this.passWordErrorMessage == "number"
    ) {
      ins
        .post("/user/registered", {
          userName: this.userNameRef,
          passWord: this.passWordRef,
          code: this.codeRef,
        })
        .then((res: any) => {
          ElMessage.error("ccc");
          console.log(res);
        })
        .catch((err: any) => {
          ElMessage.error("网络连接超时，请稍后重试.");
        });
    } else {
      ElMessage.error("错误，请检查填写项.");
    }
  }
  resetFn() {
    this.userNameRef = "";
    this.passWordRef = "";
    this.codeRef = "";
    this.userNameErrorMessage = "";
    this.passWordErrorMessage = "";
    this.codeErrorMessage = "";
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import url("../../assets/less/global.less");
@import url("./index.less");
</style>
